<template>
    <d2-container>
        <div class="setp-container">
            <el-card style="">

                <el-steps :active="activeStep" align-center>
                    <el-step title="选择集团">
                    </el-step>
                    <el-step title="设置管理员职责"></el-step>
                    <el-step title="选择管理员"></el-step>
                </el-steps>

                <div style="margin-top:20px;min-height:500px">
                    <step1 v-if="activeStep == 0" @setCurrentGroup="setCurrentGroup"></step1>
                    <step2 v-if="activeStep == 1" :pkGroup="pkGroup"></step2>
                    <step3 v-if="activeStep == 2" :pkGroup="pkGroup" @setUser="setUser"></step3>
                </div>

                <div class="footer">
                    <el-button style="margin-top: 12px;" @click="next">{{nextTxt}}</el-button>
                    <el-button style="margin-top: 12px;" v-if="activeStep > 0" @click="reset">重来</el-button>
                </div>

            </el-card>
        </div>
    </d2-container>
</template>

<script>
    import Step1 from './setp1/index'
    import Step2 from './step2/index'
    import Step3 from './step3/index'

    export default {
        data() {
            return {
                nextTxt: "下一步",
                activeStep: 0,
                pkGroup: undefined,
                userId: undefined
            }
        },
        components: {
            Step1,
            Step2,
            Step3
        },
        created() {
            this.activeStep = 0
            this.pkGroup = undefined
            this.userId = undefined
        },
        methods: {

            next() {
                if (this.activeStep == 0 && this.$isEmpty(this.pkGroup)) {
                    this.$message.error("请选择集团")
                    return
                }
                if (this.activeStep++ > 1) {
                    this.activeStep = 0;
                }
                if (this.activeStep == 2) {
                    this.nextTxt = "完成"
                } else {
                    this.nextTxt = "下一步"
                }
            },
            setCurrentGroup(val) {
                console.log("当前所选则的集团的是：", val)
                this.pkGroup = val
            },
            setUser(val) {
                console.log("当前所选则的用户的是：", val)
                this.userId = val
            },
            reset() {
                this.pkGroup = undefined
                this.userId = undefined
                this.activeStep = 0
            }
        }
    }
</script>
<style scoped>
    .setp-container {
        width: 60%;
        margin: 10px auto;
        min-height: 50vh;
    }

    .footer {
        text-align: center;
    }
</style>